<template>
  <!-- 增加修改 -->
  <a-drawer
    width="50%"
    :title="formTitle"
    :label-col="4"
    :wrapper-col="14"
    :visible="open"
    :body-style="{ height: 'calc(100vh - 100px)', overflow: 'auto' }"
    @close="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
        <a-row>
          <a-col :span="8">
            <a-form-item label="选择业务城市" prop="city">
              <a-tree
                v-model="form.city"
                checkable
                :load-data="onLoadData"
                :tree-data="treeData"
                :expanded-keys="cityexpandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                @expand="onExpand"
                @select="onSelect"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16"
            ><a-row class="form-row" :gutter="32">
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="日分配人数" prop="dayCount">
                  <a-input
                    v-model="form.dayCount"
                    placeholder="请输入日分配人数"
                    help="设置（-1）表示没有分配上线"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="接收线索" prop="busType">
                  <a-select
                    mode="multiple"
                    v-model="form.busType"
                    placeholder="请选择"
                    option-filter-prop="children"
                  >
                    <a-select-option
                      v-for="(d, index) in busTypeOptions"
                      :key="index"
                      :value="d.dictValue"
                    >
                      {{ d.dictLabel }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :lg="24" :md="24" :sm="24" :span="24">
                <a-form-model-item label="业务区域">
                  <a-input
                    v-model="form.city"
                    type="textarea"
                    aria-readonly="true"
                    :rows="4"
                  />
                </a-form-model-item>
              </a-col> </a-row
          ></a-col>
        </a-row>

        <!-- <a-collapse :bordered="false" expandIconPosition="left">
        <template #expandIcon="props">
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel
          key="1"
          header="填写更多信息（可选)"
          :style="customStyle"
        >
          <a-row gutter="32">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="手机号" prop="phonenumber">
                <a-input v-model="form.phonenumber" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="排序号" prop="sort">
                <a-input v-model="form.sort" placeholder="请输入" />
              </a-form-model-item>
            </a-col>

            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="邮箱地址" prop="email">
                <a-input v-model="form.email" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="状态" prop="status">
                <a-radio-group v-model="form.status" button-style="solid">
                  <a-radio-button
                    v-for="(d, index) in statusOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-radio-button
                  >
                </a-radio-group>
              </a-form-model-item>
            </a-col>

            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="性别" prop="sex">
                <a-radio-group v-model="form.sex" button-style="solid">
                  <a-radio-button
                    v-for="(d, index) in sexOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-radio-button
                  >
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="密码" prop="password">
                <a-input-password
                  v-model="form.password"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :lg="24" :md="24" :sm="24" :span="24">
              <a-form-model-item label="备注" prop="remark">
                <a-input
                  v-model="form.remark"
                  placeholder="请输入"
                  type="textarea"
                  allow-clear
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-collapse-panel>
      </a-collapse> -->
        <!-- <a-modal
          :visible="visible"
          title="选择业务区域"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <a-tree
            v-model="checkedKeys"
            checkable
            :load-data="onLoadData"
            :tree-data="treeData"
            :expanded-keys="cityexpandedKeys"
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            @expand="onExpand"
            @select="onSelect"
          />
        </a-modal> -->
      </a-spin>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" @click="submitForm"> 保存 </a-button>
          <a-button type="dashed" @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import sysUserForm from "./SysUserForm";
export default {
  ...sysUserForm,
};
</script>
<style lang="less">
//修复抽屉控件没有遮罩时不显示问题
.ant-drawer-left.ant-drawer-open.no-mask,
.ant-drawer-right.ant-drawer-open.no-mask {
  width: 55%;
}
.no-mask .ant-drawer-content-wrapper,
.no-mask .ant-drawer-content-wrapper {
  width: 100% !important;
}
</style>
